<template>
  <div>
    <h1>{{ count }}</h1>
    <!-- <h1>{{ info.age }}</h1> -->
    <h1>{{ info.firend.name }}</h1>
    <button @click="changeCount">改变</button>
  </div>
</template>

<script setup>
// watch侦听
import { ref, watch, isRef, reactive } from "vue";
let count = ref(10);
let info = reactive({
  name: "杨曼璐",
  age: 18,
  firend: {
    name: "白宇鹏",
    obj: {
      name: "李四",
    },
  },
});
const changeCount = () => {
  count.value++;
  // info.age++;
  info.firend.name = "张三";
};

watch(
  [count, info],
  (newVal, oldVal) => {
    console.log(newVal, oldVal);
  },
  // 开启深度监听 deep
  // 开启立即执行 immediate
  { deep: true, immediate: true }
);
</script>

<style scoped>
</style>